<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_项目增长与收缩</title>
  <style>
    .container {
      background-color: lightgreen;
      /*给父容器使用弹性布局*/
      display: flex;
      width: 500px;
    }
    .item,.eg{
      width: 100px;
      height: 100px;
      background-color: lightpink;
      border: 1px solid black;
      font-size: 45px;
    }
    .eg{
      font-size: 20px;
      background-color: #ff0;
    }
    .c1{
      flex-grow: 1;
    }
    .c2{
      flex-grow:2;
    }
    .c3{
      flex-grow: 3;
    }
    .c4{
      flex-grow: 5;
    }
    .c1{
      flex-shrink: 0;
    }
    .c2{
      flex-shrink: 1;
    }
    .c3{
      flex-shrink: 2;
    }
    .c4{
      flex-shrink: 0;
    }
  </style>
</head>
<body>
<div class="eg">参照物</div>
<div class="container">
  <div class="item c1" >1</div>
  <div class="item c2" >2</div>
  <div class="item c3" >3</div>
  <div class="item c4">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
</body>
</html>